import React, { Component } from 'react';
import styles from './style.scss';
import PropTypes from 'prop-types';
import { Select } from 'antd';
const {Option} = Select;

class Selects extends Component {
    static propTypes = {
        error: PropTypes.bool,
        option: PropTypes.array,
        optGroup: PropTypes.array,
        notFoundContent: PropTypes.string
    };

    static defaultProps = {
        error: false,
        option: [],
        optGroup: [],
        notFoundContent:'无'
    };

    render() {
        const { error, option, optGroup, className, dropdownClassName, mode, ...others } = this.props;
        let element;
        let classNames = `${styles.select}`;
        let dropdownClassNames = `${styles.dropDown}`;
        className && (classNames += ` ${className}`);
        error && (classNames += ` ${styles.error}`);
        dropdownClassName && (dropdownClassNames += ` ${dropdownClassName}`);
        if (mode === 'multiple') {
            classNames += ` ${styles.multiple}`;
        }
        if (optGroup.length > 0) {
            element =  <Select mode={mode} className={classNames} dropdownClassName={dropdownClassNames} {...others} >
                {optGroup}
            </Select>
        } else if (option.length > 0 ) {
            element = (
                <Select mode={mode} className={classNames} dropdownClassName={dropdownClassNames} {...others} >
                    {
                        option.map(opt => {
                            if (opt.id && !opt.key) {
                                return <Option 
                                            key={opt.id} 
                                            title={opt.value} 
                                            value={opt.id} 
                                            disabled={!!opt.disabled} 
                                            attr={opt}
                                        >{opt.value}</Option>;
                            } 
                            if (opt.key && opt.value) {
                                return <Option attr={opt} {...opt} title={opt.value} disabled={!!opt.disabled}>{opt.value}</Option>;
                            } 
                            if (!opt.key && !opt.id && !opt.value) {
                                return <Option attr={opt} key={opt} title={opt} disabled={!!opt.disabled}>{opt}</Option>;
                            }
                        })
                    }
                </Select>
            )
        } else {
           element = <Select mode={mode} className={classNames} dropdownClassName={dropdownClassNames} {...others} /> 
        }
        return element;
    }
}

export default Selects;